<template>
  <BaseModal ref="baseModalRef" @on-modal-ok="onModalOk" @on-modal-cancel="onModalCancel">
    <template #titleArea>选择卡片类型</template>
    <template #contentArea>
      <a-row type="flex" :gutter="16">
        <a-col :flex="2">
          <div v-for="(v, i) in menu" :key="v.type" :class="indexLeft == i ? 'active' : ''" class="left-col flex-between" @click.stop="onMenuItem(v, i)">
            <p>{{ v.name }}</p>
            <p>{{ cardData[v.type].length }}</p>
          </div>
        </a-col>
        <a-col :flex="3" style="border-left: 1px solid #e9e9e9; padding-left: 0">
          <div class="right-col">
            <div v-for="(v, i) in cardData[cardData.curTabsKey]" :key="i" class="flex right-col-content" @click.stop="onCardItem(v, i)">
              <div class="right-col-content-img">
                <img class="right-col-content-url" :src="v.url" alt="" :class="indexRight == i ? 'card-select' : ''" />
                <check-circle-filled v-if="indexRight == i" class="right-col-content-icon" />
              </div>
              <div class="right-col-content-div">
                <p>{{ v.name }}</p>
                <p>{{ v.title }}</p>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </template>
  </BaseModal>
</template>
<script lang="ts" setup>
import BaseModal from "@/components/Basics/BaseModal.vue"
import { require } from "@/hooks/require"
import { message } from "ant-design-vue"

const emits = defineEmits(["on-card-succ", "on-card-fail"])
const baseModalRef = shallowRef()
const menu = [
  {
    name: "所有",
    type: "all",
  },
  {
    name: "通用",
    type: "form",
  },
  {
    name: "项目管理",
    type: "chart",
  },
]

//卡片存储数据
let cardData: any = shallowReactive({
  all: [],
  form: [],
  chart: [],
  curTabsKey: "all",
  curCardData: {},
})

const indexLeft = ref(0)
const indexRight = ref(0)

//单击menuList菜单
const onMenuItem = (item: any, index: number) => {
  indexLeft.value = index
  cardData.curTabsKey = item?.type
}

//单击右侧某个卡片
const onCardItem = (item: any, index: number) => {
  indexRight.value = index
  cardData.curCardData = item
  console.log(item)
}

//弹框确定，添加卡片到工作台
const onModalOk = async () => {
  // 1.ajax 发送数据，
  // 2.触发父组件更新工作台卡片
  console.log(cardData.curCardData)
  if (!Object.keys(cardData.curCardData).length) {
    message.error("请选择卡片进行添加")
    return
  }
  emits("on-card-succ", cardData.curCardData.cardInfo)
  init()
  onModalCancel()
}

//打开弹框
const setOpen = () => {
  baseModalRef.value.setOpen()
}

//取消按钮，关闭弹框
const onModalCancel = () => {
  init()
  baseModalRef.value.setCloes()
}

// 初始化变量
const init = () => {
  cardData.curTabsKey = "all"
  indexLeft.value = 0
  indexRight.value = 0
}

//获取卡片数据
const getCardData = () => {
  cardData.all = [
    {
      url: require("@/assets/slide-verify/bar.svg"),
      name: "两周内工作项完成趋势",
      title: "显示项目下最近两周内所有工作项的完成趋势",

      //卡片基本信息
      cardInfo: {
        x: 0,
        y: 0,
        w: 4,
        h: 4,
        i: "100",
        id: "100",
        name: "基础表单",
        minW: 2,
        heiH: 2,
        uuid: "5tvoAynx",
        componentName: "Card2",
        showWorkbench: true,
        mainTitle: "数据报表",
        Subtitle: "共5个工作项",
        type: "form",
      },
    },
    {
      url: require("@/assets/slide-verify/chart.svg"),
      name: "图标柱状图",
      title: "可以显示项目下已保存的报表。",
      cardInfo: {
        x: 0,
        y: 0,
        w: 4,
        h: 3,
        i: "101",
        id: "101",
        name: "图标柱状图",
        minW: 4,
        heiH: 2,
        mainTitle: "图标柱状图",
        uuid: "5tvoAynx",
        componentName: "Card1",
        showWorkbench: true,
        type: "chart",
      },
    },
  ]

  cardData.curCardData = cardData.all[0] //默认选中第一个

  //手动依据卡片类型进行分类
  cardData.all.forEach((v: any) => {
    if (v?.cardInfo?.type === "form") cardData.form.push(v)
    if (v?.cardInfo?.type === "chart") cardData.chart.push(v)
  })
}

getCardData()

defineExpose({
  setOpen,
})
</script>
<style scoped lang="less">
.left-col {
  height: 35px;
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
//右侧卡片列表区域
.right-col {
  max-height: 600px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: @webkit-scrollbar-width;
    height: @webkit-scrollbar-height;
  }
  &::-webkit-scrollbar-thumb {
    background-color: @webkit-scrollbar-thumb-modal;
  }
  .right-col-content {
    padding: 15px 20px;
    border-bottom: 1px solid rgb(233, 233, 233);
    cursor: pointer;
    &:hover {
      background-color: #f3f9ff;
    }
    &:last-child {
      border-bottom: none;
    }
    .right-col-content-img {
      position: relative;
      .right-col-content-url {
        width: 130px;
        height: 80px;
        border-radius: 3px;
        box-shadow: 0 4px 6px 0 rgb(31 31 31 / 5%), 0 0 2px 0 rgb(31 31 31 / 20%);
      }
      .right-col-content-icon {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 5px;
        margin-right: 5px;
        color: #338fe5;
      }
    }
    .right-col-content-div {
      font-size: 15px;
      font-weight: 500;
      margin-top: 10px;
      margin-left: 10px;
      p:nth-child(even) {
        margin-top: 5px;
        text-align: left;
        line-height: 1.5;
        word-break: normal;
        font-size: 12px;
        color: #909090;
      }
      p:nth-child(odd) {
        font-size: 15px;
        font-weight: 500;
        margin-top: 10px;
      }
    }
  }
}
</style>
<style scoped lang="less">
.active {
  /* background-color: #eaf3fc; */
  border-left: 3px solid #338fe5;
  padding-left: 17px;
  color: #338fe5;
  font-weight: bolder;
}
.card-select {
  border: solid 2px #338fe5;
}
</style>

//1 左侧菜单栏收缩，右侧图表应该自适应大小
